<template>
<div>
  <div class="c-headop">

    <div class="btn_unselsect right_10" @click="ready" v-show="!agentready&&agentlogin">未就绪</div>
    <div class="btn_selsect right_10" @click="unready" v-show="agentready&&agentlogin">已就绪</div>

    <div class="btn_unselsect right_10" v-show="!agentlogin" @click="login">登入</div>
    <div class="btn_selsect right_10" v-show="agentlogin" @click="logout">已登入</div>

    <div class="btn_unselsect right_10" @click="sessionManagement">通话管理</div>

    <img src="../../static/images/maikefeng-3@2x.png" class="audioimage" v-show="localpublication&&!audiomuted" @click="agentaudio">
    <img src="../../static/images/jingyin-black@2x.png" class="audioimage" v-show="localpublication&&audiomuted" @click="agentaudio">

  </div>
</div>
</template>

<script>
    export default {
        name: "Headop",

        /*坐席状态，，已登入，未登入，已就绪，未就绪,小休中，*/
        props:['appointvalue','agentlogin','agentready','agentotherwork','agentskill','localpublication','sessionId','audiomuted'],
        data(){
          return{

          }
        },
        methods:{
          sessionManagement(){
              this.$emit('sessionManagement');
          },
                login(){
                    this.$emit('login');
                 },
                logout(){
                  this.$emit('logout');
                },
                ready(){
                  this.$emit('ready');
                },
                unready(){
                  this.$emit('unready');
                },
                appoint(){
                   this.$emit('appoint');
                },
                otherwork(){
                   this.$emit('otherwork');
                },
                setskill(){
                   this.$emit('setskill');
                },

                agentaudio(){
                   this.$emit('agentaudio');
                },


        }
    }
</script>

<style scoped>
  .c-headop{
    /*background-color: yellow;*/
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .t1{
    color:rgba(253,253,253,1);
    font-size: 14px;
    /*width: 50px;*/
  }

  .btn_unselsect{
    width:80px;
    height:40px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(44,137,234,1);
    line-height: 40px;
  }

  .btn_selsect{
    width:80px;
    height:40px;
    background:rgba(125,179,236,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height: 40px;
  }

  .btn_selsect_empty{
    width:120px;
    height:40px;
    border:1px solid rgba(125,179,236,1);
    border-radius:4px;
    /*font-size:14px;*/
    max-font-size: 14px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height: 40px;
  }


  .right_10{
    margin-right: 10px;
  }

  .skilllist{
    width: 120px;
    height: 40px;
    position: relative;
  }

  .skilllists{
    width: 120px;
    height: 40px;
    position: relative;
  }



  .skill3{
    position: absolute;
    top: 17px;
    right: 15px;
    width: 8px;
    height: 6px;
  }

  .skill33{
    position: absolute;
    top: 17px;
    right: 15px;
    width: 12px;
    height: 6px;
  }


  .audioimage{
    width: 20px;
    height: 23px;
  }

  .animate{
    width: 200px;
    /*background-color: yellow;*/
    display: inline-block;
    white-space: nowrap;
    /*padding-right: 20px;*/
    animation: 10s wordsLoop linear infinite normal;
  }

  @keyframes wordsLoop {
    0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }

  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }


</style>
